<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>南京大学职业咨询室预约平台</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/i/ico_128X128.ico') }}">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="apple-touch-icon-precomposed" href="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/amazeui.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/app.css', v='1.4') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/jspb.css') }}">
    <script src="{{ url_for('static', filename='assets/js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/amazeui.min.js') }}"></script>
    <style>   

    table th,table td{
        font-size:14px;
    }
    .consult-table tr{
        width:100%;
        display:block;
        border-top:1px solid #ddd;
    }
    .consult-table tr:first-child{
        border:none;
    }

    .consult-table tr td:nth-child(1){
        width:20%;
        display:inline-block;
        border:none;
    }
    .consult-table tr td:nth-child(2){
        width:75%;
        display:inline-block;
        border:none;
    }
    </style>
</head>

<body>
    <div class="header">
        <!--<div class="header-back" onclick="history.back()">返回</div>-->
        <div class="header-title">咨询信息填写与提交</div>
    </div>
    <div class="content">
        <div class="alert alert-warning">
            {% with messages = get_flashed_messages() %}
            {% if messages %}
            <ul class=flashes>
                {% for message in messages %}
                <div class="am-alert am-alert-secondary" data-am-alert>
                    <button type="button" class="am-close">&times;</button>
                    <div style="text-align: center;">{{ message }}</div>
                </div>
                {% endfor %}
            </ul>
            {% endif %}
            {% endwith %}
        </div>
        <div class="regester">
            <form name="njusub" method="post">
                {{ form.csrf_token }}
                <table class="am-table am-table-centered consult-table" id="3" cellpadding="0" cellspacing="0" style="border:none;">
                    <tr>
                        <input class="input" type="hidden" id="id_tcid" name="tcid" value=""/>
                        <input class="input" type="hidden" id="id_pbid" name="pbid" value=""/>
                        <input class="input" type="hidden" id="id_verycode_s" name="verycode" value=""/>
                        <div class="am-g am-form-group" id="id_result" style="width:85%;align:center;">{{stuinfo['yyinfo']|safe}}</div>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_name" class="am-form-label">姓名</label>
                        </td>
                        <td>
                            <input class="input am-form-field" type="text" name="name" id="id_name" style="width:100%;height: 100%;border:1px solid #e6e6e6" value="{{ stuinfo['name'] }}">
                        </td>
                    </tr>
                        <td>
                            <label for="id_sex" class="am-form-label">性别</label>
                        </td>
                        <td>
                            <select class="selec" name="sex" id="id_sex" data-am-selected="{btnWidth: '100%', btnHeight: '100%', btnSize: 'sm'}">
                                <option value="{{stuinfo['sex']}}">{{stuinfo['sex']}}</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_department" class="am-form-label">院系</label>
                        </td>
                        <td>
                            <select class="selec" name="department" id="id_department" data-am-selected="{btnWidth: '100%', btnHeight: '100%', btnSize: 'sm'}">
                                <option value="{{stuinfo['dept']}}">{{stuinfo['dept']}}</option>
                                <option value="文学院">文学院</option>
                                <option value="历史学院">历史学院</option>
                                <option value="哲学系（宗教学系）">哲学系（宗教学系）</option>
                                <option value="新闻传播学院">新闻传播学院</option>
                                <option value="法学院">法学院</option>
                                <option value="商学院">商学院</option>
                                <option value="外国语学院">外国语学院</option>
                                <option value="政府管理学院">政府管理学院</option>
                                <option value="信息管理学院">信息管理学院</option>
                                <option value="社会学院">社会学院</option>
                                <option value="数学系">数学系</option>
                                <option value="物理学院">物理学院</option>
                                <option value="天文与空间科学学院">天文与空间科学学院</option>
                                <option value="化学化工学院">化学化工学院</option>
                                <option value="计算机科学与技术系">计算机科学与技术系</option>
                                <option value="电子科学与工程学院">电子科学与工程学院</option>
                                <option value="现代工程与应用科学学院">现代工程与应用科学学院</option>
                                <option value="环境学院">环境学院</option>
                                <option value="地球科学与工程学院">地球科学与工程学院</option>
                                <option value="地理与海洋科学学院">地理与海洋科学学院</option>
                                <option value="大气科学学院">大气科学学院</option>
                                <option value="生命科学学院">生命科学学院</option>
                                <option value="医学院">医学院</option>
                                <option value="工程管理学院">工程管理学院</option>
                                <option value="匡亚明学院">匡亚明学院</option>
                                <option value="海外教育学院">海外教育学院</option>
                                <option value="软件学院">软件学院</option>
                                <option value="建筑与城市规划学院">建筑与城市规划学院</option>
                                <option value="马克思主义学院">马克思主义学院</option>
                                <option value="创新创业学院">创新创业学院</option>
                                <option value="教育研究院">教育研究院</option>
                                <option value="大学外语部">大学外语部</option>
                                <option value="体育部">体育部</option>
                                <option value="艺术研究院">艺术研究院</option>
                                <option value="中美文化研究中心">中美文化研究中心</option>
                                <option value="模式动物研究所">模式动物研究所</option>
                                <option value="美术研究院">美术研究院</option>
                                <option value="思想家研究中心">思想家研究中心</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_major" class="am-form-label">专业</label>
                        </td>
                        <td>
                            <input class="input am-form-field" type="text" name="major" id="id_major" style="width:100%;height: 100%;border:1px solid #e6e6e6" value="{{ stuinfo['major'] }}">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_stuid" class="am-form-label">学号</label>
                        </td>
                        <td>
                            <input class="input am-form-field" type="text" name="stuid" id="id_stuid" style="width:100%;height: 100%;border:1px solid #e6e6e6" value="{{ stuinfo['stuid'] }}">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_grade" class="am-form-label">年级</label>
                        </td>
                        <td>
                            <select class="selec" name="grade" id="id_grade" data-am-selected="{btnWidth: '100%', btnHeight: '100%', btnSize: 'sm'}">
                                <option value="{{stuinfo['grade']}}">{{stuinfo['grade']}}</option>
                                <option value="大一">大一</option>
                                <option value="大二">大二</option>
                                <option value="大三">大三</option>
                                <option value="大四">大四</option>
                                <option value="研一">研一</option>
                                <option value="研二">研二</option>
                                <option value="研三">研三</option>
                                <option value="博士">博士</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_content" class="am-form-label">内容</label>
                        </td>
                        <td>
                            <select multiple class="selec" name="content" id="id_content" data-am-selected="{btnWidth: '100%', btnHeight: '100%', btnSize: 'sm', maxHeight: 120}">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_demands" class="am-form-label">需求</label>
                        </td>
                        <td>
                            <textarea class="input" type="text" name="demands" id="id_demands" style="width:100%;height: 100px;border:1px solid #e6e6e6" placeholder="请简述想要咨询的具体问题及对应需求"></textarea>
                        </td>
                    </tr>
                </table>
            </form>

                {% if newcomer %}
                <table class="am-table am-table-centered" id="table1" cellpadding="0" cellspacing="0" style="border:none;">
                    <tr>
                        <td>&nbsp;</td>
                        <td><label>手&nbsp;&nbsp;机&nbsp;&nbsp;号</label></td>
                        <td><input type="text" class="am-form-field" name="contact" id="very_contact" value="{{ stuinfo['contact'] }}" style="width:100%;height: 100%;" placeholder="手机号为查询账号" readonly></td>
                        <td><button id="getverycode" class="am-btn am-btn-default am-btn-sm"><p style="color:purple;"><font size="2">获取验证码</font></p></button></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label></td>
                        <td><input type="text" class="am-form-field" name="verycode1" id="id_verycode" autocomplete="off" value="" style="width:100%;height: 100%;" placeholder="请输入验证码"></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
                {% endif %}
                
            <div class="am-g am-form-group">
                <button type="submit" class="am-btn am-btn-primary" name="commit_btn" id="id_commit" onclick="commit_info()">确认提交</button>
                <button class="am-btn am-btn-default" name="ret_btn" id="id_ret_list" onclick="backto_teacher_list()">返回重选</button>
            </div>
        </div>
    </div>

    <div class="footer">
    <ul>
        <li><a href="/get_teacher_schedule" class="footer-item on">预约咨询</a></li>
        <li><a href="/urgent_booking" class="footer-item">紧急咨询</a></li>
        <li><a href="/student_query_login_student" class="footer-item">我的预约</a></li>
        <li><a href="/get_consultant_story_page" class="footer-item">咨询室故事</a></li>
        <li><a href="/index" class="footer-item">返回首页</a></li>
    </ul>
    </div>
    
    <script type="text/javascript">

    function commit_info()
    {
        if (checkInputs()) {
            document.njusub.action="/register_data";
            document.njusub.method="post";
            document.njusub.submit();
        }else{
            return false;
        };
    }

    function backto_teacher_list()
    {
        document.njusub.action="/get_teacher_schedule";
        document.njusub.method="post";
        document.njusub.submit();
    }

    $(document).ready(function(){
        var csrftoken = $('meta[name=csrf-token]').attr('content');
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });

        $.ajax({type: 'post',url: '/stu_existed_cont',data: {a: null},async: 0,success: function(data) {
            var jsondata = eval(data);
            document.getElementById("id_content").options.length=0;
            $.each(jsondata, function(idx, item) {
                document.getElementById("id_content").options.add(new Option(item.cont,item.id));
            });
        },error: function() {alert('服务端异常');}});

        //用一个比较二的方式处理一下td的宽度问题，解决选择了多项内容之后整体宽度会增大的问题
        var wd = $(".consult-table tr td").eq(1).width();
        $(".consult-table tr td").each(function(index,item){
            if($(item).index()==1){
                $(item).css("width",wd);
            }
        })
    });

    function isArguInValid(a) {
        if (a == undefined || a == "") {
            return true;
        };
    }

    function isValidStuID(a) {
        a = a.toLowerCase();
        var validBcID = /^0?[0-9]\d{8}$/;
        var validMsID = /^0?(mg)[0-9]\d{6}$/;
        var validDcID = /^0?mf[0-9]\d{6}$/;
        return validBcID.test(a) || validMsID.test(a) || validDcID.test(a);
    }

    function checkInputs() {
        var a = $("#id_name").val(),
            b = $("#id_sex").val(),
            d = $("#id_department").val(),
            e = $("#id_major").val(),
            f = $("#id_grade").val(),
            g = $("#id_content").val(),
            h = $("#id_stuid").val();

        if (isArguInValid(a)) {
            alert("请输入姓名！");
            return false;
        };
        if (isArguInValid(b)) {
            alert("请选择性别！");
            return false;
        };
        if (isArguInValid(d)) {
            alert("请选择院系信息！");
            return false;
        };
        if (isArguInValid(e)) {
            alert("请输入专业名称！");
            return false;
        };
        if (isArguInValid(f)) {
            alert("请选择年级！");
            return false;
        };
        if (isArguInValid(g)) {
            alert("请选择咨询内容！");
            return false;
        };
        if (!isValidStuID(h)) {
            alert("您输入的学号不合法，请重新输入！");
            return false;
        };

        var objvery = document.getElementById("id_verycode");
        if (objvery != null && objvery != undefined) {
            if (isArguInValid($("#id_verycode").val())) {
                alert("请输入验证码！");
                return false;
            }else{
                $("#id_verycode_s").val($("#id_verycode").val());
            };
        };
        
        return true;
    }

    function checkIsTeleNum(a) {
        var validTeleNum = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
        return validTeleNum.test(a);
    }
    
    var wait=60;  
    function time(o) {  
        if (wait == 0) {  
            o.removeAttribute("disabled");            
            o.value="获取验证码";  
            wait = 60;  
        } else {  
            o.setAttribute("disabled", true);  
            o.value="重新发送(" + wait + ")";  
            wait--;  
            setTimeout(function() {  
                time(o);  
            },  
            1000);
            //alert(wait);  
        }  
    }  
    
    document.getElementById("getverycode").onclick=function(){
        if (checkIsTeleNum($("#very_contact").val())==false) {
            alert("请输入正确的电话号码！");
            return false;
        };

        var csrftoken = $('meta[name=csrf-token]').attr('content');
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
        $.ajax({
            // 请求发送方式
            type: 'post',
            // 验证文件
            url: '/unlog_get_verify_code',
            // 用户输入的帐号密码
            data: {
                'contact': $("#very_contact").val()
            },
            // 异步，不写默认为True
            async: true,
            //请求成功后的回调
            success: function(data) {
                //alert("已发送验证码！");
                //alert(data.msg);
                //alert(data.status);
            },
            error: function() {
                window.location.href = './?msg='+data.msg;
                alert('服务端异常');
            }

        }); 
        //开始计时
        time(this);
    }  
    
    </script>
</body>

</html>
